<template>
    <div>
        <span>我是elementPlus</span>
        <el-button type="primary" @click="router.go(-1)">返回首页</el-button>
        <el-table :data="tableData" style="width: 70%">
            <template v-for="(item,index) in columns" :key="item.prop">
                <el-table-column :prop="item.prop" :label="item.label">
                    <template #header="scope">
                        {{scope.column.label}}
                        <el-button :ref="getRef" @click="btnC(index)" style="border:none">
                            ^
                        </el-button>
                    </template>
                </el-table-column>
            </template>
            <el-table-column label="操作" width="180">
                <template #default>
                    <div v-dropdown>
                        <span>操作^</span>
                        <div>开始</div>
                        <div>结束</div>
                        <div>暂停</div>
                        <div>编辑</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-popover :virtual-ref="buttonRef" v-model:visible="visible" trigger="hover" title="With title" virtual-triggering>
        <span> Some content </span>
    </el-popover>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const refs = ref([]);
const getRef = (val) => {
    if (val.ref && !refs.value.includes(val.ref)) {
        refs.value.push(val.ref)
    }
};

const buttonRef = ref();
const visible = ref(false);
const btnC = (index) => {
    buttonRef.value = refs.value[index]
    visible.value = true
};

const columns = [
    { prop: "date", label: "Date" },
    { prop: "name", label: "Name" },
    { prop: "address", label: "Address" },
];

const router = useRouter();
onMounted(() => {
    console.log("onMounted");
});
const tableData = [
    {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
    },
];
</script>

<style lang="scss" scoped></style>